<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        Vue中有2种数据绑定的方式：
        1.单向数据绑定(v-bind)：数据只能从data流向页面
        2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
        备注：
            1.双向绑定一半都应用在表单元素上，如input、select上
            2.v-model:value 可以简写为v-model,因为v-model默认就是收集value值

    -->
    <div id="demo">
        单向数据绑定:<input type="text" v-bind:value="name"><br/>
        双向数据绑定:<input type="text" v-model:name="name"><br>

        <!-- 简写 -->
        单向数据绑定:<input type="text" :value="address"><br/>
        双向数据绑定:<input type="text" v-model="address"><br>
        <!-- 错误演示 -->
        <!-- <h2 v-model:x="name">你好，</h2> -->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:"#demo",
            data:{
                name:"asddddddd",
                address:"fff00"
            }
        })
    </script>
</body>
</html>